<template>
  <div
    class="f-c-c w-20 h-20 rd-2 shadow cursor-pointer"
    :style="{ backgroundColor: color }"
  >
    <icon-ic-outline-check
      v-if="checked"
      :class="[iconClass, isWhite ? 'text-gray-700' : 'text-white']"
    />
  </div>
</template>

<script lang="ts" setup>
interface Props {
  /** 颜色 */
  color: string;
  /** 是否选中 */
  checked: boolean;
  /** 图标的class */
  iconClass?: string;
}

const props = withDefaults(defineProps<Props>(), {
  iconClass: "text-14",
});

const whiteColors = ["#ffffff", "#fff", "rgb(255,255,255)"];
const isWhite = computed(() => whiteColors.includes(props.color));
</script>

<style scoped></style>
